<template>
  <div class="projectlog">
    <div class="userInfo flex">
      <img :src="item.user?.avatar" />
      <div class="right flex">
        <span class="username">{{ item.user?.username }}</span>
        <span class="duties">{{ item.user?.duties }}</span>
      </div>
    </div>
    <div class="logs flex" v-for="log in item.logs">
      <span class="iconfont" :class="log.icon ?? 'icon-xiangmu1'"></span>
      <span class="title">{{ log.name }}</span>
    </div>

  </div>
</template>

<script setup lang="ts">
import { IProject } from '@/types/user';
defineProps<{ item: IProject }>()

</script>

<style scoped lang="scss">
.projectlog {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: 10px 20px;
  gap: 20px;

  .userInfo {
    gap: 16px;

    >img {
      width: 40px;
      height: 40px;
      border-radius: 50%;
    }

    .right {
      flex-direction: column;
      align-items: flex-start;
      gap: 5px;

      .username {
        font-size: 14px;
        font-weight: bold;
      }

      .duties {
        font-size: 12px;
        color: #91929E;
      }

    }
  }


  .logs {
    gap: 10px;
    padding: 10px 20px;
    border-radius: 20px;
    text-align: left;
    background-color: #E6EDF5;
    color: #000;
    align-items: center;

    .iconfont {
      font-size: 25px;
      color: #3498db;
    }

    .title {
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
  }
}
</style>